import React,{Component} from 'react'
import * as pub from '../../config/public';
import * as fetch from '../../config/fetch';
import {Link,browserHistory} from 'react-router'
import {Spin,message,Button} from 'antd'
import Layer from '../Layer';
class StudentRank extends Component {
	constructor(args) {
		super();
		this.state = {
			List : [],
            tab:1,
            loading:false,
            pageno:1
		}
	}
	changeTab(tab) {
		this.setState({
			tab: tab
		})
		let topType;
		switch (tab) {
			case 0:
				topType = 'day';
				break;
			case 1:
				topType = 'week';
				break;
			case 2:
				topType = 'month';
				break;
			default:
				break;
		}
		pub.loading(this, true);
		let pageno = this.state.pageno
		fetch.rankStudent(topType,pageno).then((data) => {
			if(data.result ==='RC100'){
				this.setState({
					List: data.studentTopList || []
				},()=>{
					pub.loading(this, false);
				})
			}else{
				message.error(data.errMsg, 3);
				pub.loading(this, false);
			}
		}, (res) => {
			pub.loading(this, false);
			pub.reject(res);
		})
	}
	componentWillReceiveProps(nextProps) {
		this.setState({
			List: nextProps.studentTopList
		})
	}
	render(){
		const {tab} = this.state;
		return(
			<div className="row">
				<div className="filter clearFix">
					<div className="title">学霸排行榜</div>
					<ul className="filter-ul nav">
						<li className={tab === 0 ?"active":''}>
							<a onClick={()=>this.changeTab(0)}>日榜</a>
						</li>
						<li className={tab === 1 ?"active":''}>
							<a onClick={()=>this.changeTab(1)}>周榜</a>
						</li>
						<li className={tab === 2 ?"active":''}>
							<a onClick={()=>this.changeTab(2)}>月榜</a>
						</li>
					</ul>
					<Link to='/StudentRank' className="floatR" style={{lineHeight: '66px',paddingRight: '20px'}}>
						更多
						<i className="icon-angle-right"></i>
					</Link>
				</div>
				<Spin spinning={this.state.loading} tip="加载列表中...">
				<ul className="student-top" style={{minHeight:'200px'}}>
                    {
                        this.state.List.map((item,index)=>
								<li key={index}>
									<span className="num">{index>2?index+1:''}</span>
									<span className="student">
										<img src={pub.getFile(item.headPath)} alt='封面图片' onError={(e) => pub.headImageError(e)}/>
										{item.userRealName}
									</span>
									<span className="compay">{item.branckOffice}</span>
									<span>{item.vipGradName}</span>
									<span className="studyed">已通过<b>{item.total}</b>门课</span>
								</li>
                        )
                    }
				</ul>
				</Spin>
			</div>
		)
	}
}
class CourseRank extends Component {
	constructor(args) {
		super();
		this.state = {
			List : [],
            tab:1,
            loading:false,
            visibleDH:false,
            pageno:1
		}
	}
	changeTab(tab) {
		this.setState({
			tab: tab
		})
		this.show(tab);
	}
	componentWillReceiveProps(nextProps) {
		this.setState({
			List: nextProps.courseTopList
		})
	}
	operate(courseId, type) {
		pub.loading(this, true);
		fetch.operateCourse(courseId, type).then((data) => {
			if(data.result === "RC100"){
				message.success(data.msg, 3);
				this.show(this.state.tab);
			}
			if (data.result === "RC200") {
				message.error(data.errMsg, 3);
			} else {
				this.show(this.state.tab);
			}
			pub.loading(this, false);
		}, (res) => {
			pub.reject(res);
			pub.loading(this, false);
		})
	}
	show(tab) {
		let topType;
		switch (tab) {
			case 0:
				topType = 'day';
				break;
			case 1:
				topType = 'week';
				break;
			case 2:
				topType = 'month';
				break;
			default:
				break;
		}
		pub.loading(this, true);
		let pageno = this.state.pageno
		fetch.rankCourse(topType,pageno).then((data) => {
			if (data.result === 'RC100') {
				this.setState({
					List: data.courseTopList
				}, () => {
					pub.loading(this, false);
				})
			} else {
				message.error(data.errMsg, 3);
			}

		}, (res) => {
			pub.loading(this, false);
			pub.reject(res);
		})
	}
	ok(id) {
		// pub.loading(this, true);
		fetch.operateCourses(id).then((data) => {
			if (data.result === 'RC100') {
				message.success(data.errMsg, 3)
				pub.jumpHistory.push("/CourseDetail/" + id)
			} else {
				message.error(data.errMsg, 3);
			}
			// pub.loading(this, false);
		}, (res) => {
			pub.reject(res);
			// pub.loading(this, false);
		})
	}
	clickCourse(item) {
		if (item.goodCourse === '1') {
			if (item.userCourseOperation.isBuy === 1||item.userCourseOperation.isBuy === '1') {
				pub.jumpHistory.push("/CourseDetail/" + item.courseId)
			} else {
				this.setState({
					visibleDH: true,
					courseId: item.courseId,
					studyIntegral: item.studyIntegral
				})
			}
		} else {
			pub.jumpHistory.push("/CourseDetail/" + item.courseId)
		}
	}
	confirmBuy(id,type,item){
		if(item.userCourseOperation.isBuy===1){
			if(id!==undefined){
				this.operate(id,type);//按收藏按钮
			}else{
				pub.jumpHistory.push("/CourseDetail/" +id);//按视频和文字
			}
		}else{
			this.setState({
				visibleDH:true,
				courseId: item.courseId,
			    studyIntegral: item.studyIntegral
			})
		}
	}
	render(){
		const {tab} = this.state;
		return(
			<div className="row pad-t-20">
				<div className="filter clearFix">
					<div className="title">课程集赞排行榜</div>
					<ul className="filter-ul nav">
						<li className={tab === 0 ?"active":''}>
							<a onClick={()=>this.changeTab(0)}>日榜</a>
						</li>
						<li className={tab === 1 ?"active":''}>
							<a onClick={()=>this.changeTab(1)}>周榜</a>
						</li>
						<li className={tab === 2 ?"active":''}>
							<a onClick={()=>this.changeTab(2)}>月榜</a>
						</li>
					</ul>
					<Link to='/CourseRank' className="floatR" style={{lineHeight: '66px',paddingRight: '20px'}}>
						更多
						<i className="icon-angle-right"></i>
					</Link>
				</div>
				<Spin spinning={this.state.loading} tip="加载列表中...">
				<ul className="course-top" style={{minHeight:'349px'}}>
					{
						this.state.List.map((course,index)=>{
							return(
								<li key={index}>
									<span className="num">{index>2?index+1:''}</span>
									
									<div className="course-info">
										<Link onClick={() => this.clickCourse(course)} >
										    <img alt='test' src={require("../../style/images/test.png")} />
										    <div className="play"><i className="icon-play"></i></div>
									  {/*       <video 
														src={pub.getFile(course.coursevideoPath)} 
													>
														您的浏览器不支持 video 标签。
													</video>*/}
											<p className="title">{course.courseName}</p>
											{course.goodCourse === '1' ? <div className='index-jing' ></div> : null}
											<p className="cont shorthand">{course.courseDesc === null ? '没有描述' : pub.subString(course.courseDesc,50) }</p>
										</Link>
										<p className="collect-like">
									{course.goodCourse==='0'?
										<font style={{opacity:course.userCourseOperation.isCollection === 1 ? 1:0.4}} onClick={()=>this.operate(course.courseId,2)}><i className="icon-heart"></i><span className="cooLike-font">{course.sumCollection}</span></font>:
										<font style={{opacity:course.userCourseOperation.isCollection === 1 ? 1:0.4}} onClick={()=>this.confirmBuy(course.courseId,2,course)}><i className="icon-heart"></i><span className="cooLike-font">{course.sumCollection}</span></font>
									}
										<font style={{opacity:course.userCourseOperation.isLike === 1 ? 1:0.4}} onClick={()=>this.operate(course.courseId,3)}><i className="icon-thumbs-up"></i><span className="cooLike-font">{course.sumLike}</span></font></p>
									</div>
								</li>
							)
						}
								
						)
					}
				</ul>
				<Layer
					title="设置兑换积分"
					show={this.state.visibleDH}
					hide={(e) => { this.setState({ visibleDH: false }) }}
					width="400px"
					height="270px"
				>
					<div className="row">
						<div className="pop-box-1" style={{ textAlign: 'left' }}>
							<p style={{ textAlign: 'center' }}>您需要{this.state.studyIntegral}积分兑换该课程</p>
						</div>
						<div className="pop-btn">
							<Button loading={this.state.loading} onClick={() => { this.setState({ visibleDH: false }) }} className="btn btn-blue" style={{ borderRadius: '5px', marginRight: '50px' }}>取消</Button>
							<Button loading={this.state.loading} className="btn btn-blue" style={{ borderRadius: '5px' }} onClick={() => this.ok(this.state.courseId)}>确认</Button>
						</div>
					</div>
				</Layer>
				</Spin>
			</div>
			)
	}
}
class Rank extends Component {
	constructor(args) {
		super();
		this.state = {
			data : {
				studentTopList:[],
				courseTopList:[],
				loading:false
			}
		}
	}
	componentWillMount() {
		pub.loading(this,true);
		fetch.rank().then((data) => {
			this.setState({
				data
			},()=>{
				pub.loading(this,false);
			})
		},(res)=>{
			pub.loading(this,false);
			pub.reject(res);
		})
	}
	render(){
		return(
		<div className="wrapper bg-F0F4F6" >
		    <Spin spinning={this.state.loading} tip="加载列表中...">
			  <div className="layout clearFix" style={{paddingTop:'20px',paddingBottom:'60px'}}>
			     <StudentRank studentTopList={this.state.data.studentTopList || []}/>
			     <CourseRank courseTopList={this.state.data.courseTopList || []}/>
			  </div>
			</Spin>
	    </div>
			)
	}
}
export default Rank;